
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px" style="width: 400px; margin-left:50px;">
        <el-form-item label="受训人信息">
          <el-input v-model="this.$route.query.userInfo" />
        </el-form-item>
      </el-form>
    </div>
    <div style="color:red; font-weight: 700;">新员工培训</div>
    <el-table ref="dragTable" v-loading="listLoading" :data="listNew" row-key="id" border fit highlight-current-row style="width: 100%">
      <!-- <el-table-column align="center" label="姓名" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.trainee==null? ' ':scope.row.trainee.userName }}</span></template>
      </el-table-column>
      <el-table-column class-name="status-col" label="部门" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.deptid==null? ' ':scope.row.deptid.deptName }}</span></template>
      </el-table-column> -->
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="90"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="培训等级">
        <template slot-scope="scope">
          <span v-if="scope.row.levels==1" style="color:red;">入厂培训</span>
          <span v-if="scope.row.levels==2" style="color:green;">车间培训</span>
          <span v-if="scope.row.levels==3" style="color:blue;">班组培训</span>
        </template>
      </el-table-column>
      <el-table-column min-width="240px" label="主题">
        <template slot-scope="scope">
          <span>{{ scope.row.subject }}</span></template>
      </el-table-column>
      <el-table-column width="100px" label="培训开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.sdate==null? ' ':scope.row.sdate| parseTime('{yy}-{mm}-{dd} ') }}</span></template>
      </el-table-column>
      <el-table-column width="100px" label="培训结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.edate==null? ' ':scope.row.edate| parseTime('{yy}-{mm}-{dd} ') }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="学时">
        <template slot-scope="scope">
          <span>{{ scope.row.period }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="分数">
        <template slot-scope="scope">
          <span>{{ scope.row.grade }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="培训人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.trainer==null? ' ':scope.row.trainer.userName }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="是否合格" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.grade>=60? '合格':'不合格' }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="审核人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.auditor==null? ' ':scope.row.auditor.userName }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="审核状态" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.astatus==1? '通过':'未通过' }}</span></template>
      </el-table-column>
    </el-table>
    <div style="color:red; font-weight: 700;">年度再培训</div>
    <el-table ref="dragTable" v-loading="listLoading" :data="listRe" row-key="id" border fit highlight-current-row style="width: 100%">
      <!-- <el-table-column align="center" label="受训人" width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.trainee==null? ' ':scope.row.trainee.userName }}</span></template>
      </el-table-column>
      <el-table-column class-name="status-col" label="所属Team" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.deptName.deptName }}</span></template>
      </el-table-column> -->
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="90"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="培训主题">
        <template slot-scope="scope">
          <span>{{ scope.row.subject }}</span></template>
      </el-table-column>
      <el-table-column width="100px" label="培训开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.sdate==null? ' ':scope.row.sdate| parseTime('{y}-{m}-{d} ') }}</span></template>
      </el-table-column>
      <el-table-column width="100px" label="培训结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.edate==null? ' ':scope.row.edate| parseTime('{yy}-{mm}-{dd} ') }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="培训人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.trainer==null? ' ':scope.row.trainer.userName }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="学时">
        <template slot-scope="scope">
          <span>{{ scope.row.period }}</span></template>
      </el-table-column>
      <el-table-column min-width="240px" label="培训内容">
        <template slot-scope="scope">
          <span>{{ scope.row.contents }}</span></template>
      </el-table-column>
      <el-table-column min-width="100px" label="考核方式">
        <template slot-scope="scope">
          <span>{{ scope.row.testType }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="是否合格" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.isOk>=60? '合格':'不合格' }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="审核人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.auditor.userName }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="裁决状态" width="80" prop="" />
    </el-table>
    <div style="color:red; font-weight: 700;">轮岗培训</div>
    <el-table ref="dragTable" v-loading="listLoading" :data="listPost" row-key="id" border fit highlight-current-row style="width: 100%">
      <!-- <el-table-column align="center" label="受训人" width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.trainee==null? ' ':scope.row.trainee.userName }}</span></template>
      </el-table-column>
      <el-table-column class-name="status-col" label="原所属Team" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.oldDept.deptName }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="现所属Team" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.newDept==null? ' ':scope.row.newDept.deptName }}</span></template>
      </el-table-column>-->
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="90"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100px" label="培训等级">
        <template slot-scope="scope">
          <span>{{ scope.row.levels==1? '班组培训':'车间培训' }}</span></template>
      </el-table-column>
      <el-table-column width="100px" label="培训开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.sdate==null? ' ':scope.row.sdate| parseTime('{y}-{m}-{d} ') }}</span></template>
      </el-table-column>
      <el-table-column width="100px" label="培训结束时间">
        <template slot-scope="scope">
          <span>{{ scope.row.edate==null? ' ':scope.row.edate| parseTime('{yy}-{mm}-{dd} ') }}</span></template>
      </el-table-column>
      <el-table-column min-width="240px" label="培训主题">
        <template slot-scope="scope">
          <span>{{ scope.row.subject }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="培训人" width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.trainer.userName }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="是否合格" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.grade>=60? '合格':'不合格' }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="审核人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.auditor.userName }}</span></template>
      </el-table-column>
      <el-table-column align="center" label="裁决状态" width="80" prop="" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageQ" :limit.sync="listQuery.limit" @pagination="fechData" />
  </div>
</template>
<script>
import { getdetailAll } from '@/api/trainNew'
/* import { fetchTrainNewList, fetchAllCount, getdetailAll } from '@/api/trainNew'
import { fetchTrainReList } from '@/api/train-re'
import { fetchTrainPostList } from '@/api/train-post' */
import { parseTime } from '@/utils'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
export default {
  name: 'TrainNew',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      total: 0,
      listNew: null,
      listRe: null,
      listPost: null,
      listLoading: true,
      editList: null,
      sortable: null,
      userId: null,
      /* userName: null,
      empNo: null, */
      oldList: [],
      newList: [],
      // 参数条件
      listQuery: {
        pageQ: 1,
        limit: 20,
        // 获取URL参数
        userId: this.$route.query.userId
        /* userName: this.$route.query.userName,
        empNo: this.$route.query.empNo */
      },
      temp: {
        id: undefined,
        userId: null
      },
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'sdate', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
    this.fechData()
  },
  methods: {
    fechData() {
      /* fetchAllCount().then(response => {
        this.total = response.count
      })
      fetchTrainNewList(this.listQuery).then(response => {
        this.listLoading = true
        this.listNew = response.ehstrainnewList
        this.listLoading = false
      })
      fetchTrainReList(this.listQuery).then(response => {
        this.listLoading = true
        this.listRe = response.ehstrainreList
        this.showList = response.ehstrainreList
        this.listLoading = false
      })
      fetchTrainPostList(this.listQuery).then(response => {
        this.listLoading = true
        this.listPost = response.ehstrainpostList
        this.showList = response.ehstrainpostList
        this.listLoading = false
      }) */
      getdetailAll(this.listQuery).then(response => {
        this.listLoading = true
        this.listNew = response.List1
        this.listRe = response.List2
        this.listPost = response.List3
        this.listLoading = false
        this.total = response.count
        if (response.count === 0) {
          alert('请先在总培训列表选择受训人！')
        }
      })
    },
    handleDownload() {
    },
    handleReset() {
      this.temp = {
        lsdate: null
      }
    },
    handleFilter() {
      this.fechData()
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>
